<template>
	<div class="main">
		<div class="outDiv">
			<scroller lock-x>
				<div>
					<go-back aa='../volunteer/indexs'></go-back>
					<div class="scrollerDiv">
						<div class="stepImage">
							<img src="~/static/images/step2.png" style="width: 100%">
						</div>
						<div class="chooseArea">
							<div class="placeChecker" style="min-height: 5rem;">
								<div class="placeTitle">
									<div class="title">地域倾向</div>
									<div class="moreTip">可多选</div>
								</div>
								<checker v-model="choosePlaceList" type="checkbox" class="checkerBox" default-item-class="defaultItem"
								 selected-item-class="selectedItem">
								 	<checker-item @on-item-click="dianlno('place')" value="">不限</checker-item>
									<checker-item @on-item-click="dianlye('place')" v-for="(item, index) in checkList" :key="index" :value="item">{{ item }}</checker-item>
								</checker>
							</div>
							<WantMajor leftTitle="意向专业" :showArr="zhuanye" plhdText="输入关键词检索专业" @removeArrItem="intentionList"></WantMajor>
							<GetMoreChoose leftTitle="目标大学" :showArr="daxue" plhdText="输入关键词检索大学" @removeArrItem="finalList" modelType="2"></GetMoreChoose>
							<OutProviceModel leftTitle="排除省份" :showArr="outPlace" :proArr="checkList" plhdText="请输入排除省份" @removeProArrItem="finalOutProList"></OutProviceModel>
							<GetMoreChoose leftTitle="排除大学" :showArr="outDaxue" plhdText="输入关键词检索大学" @removeArrItem="finalList"  modelType="4"></GetMoreChoose>
							<GetMoreChoose leftTitle="排除专业" :showArr="outZhuanye" plhdText="输入关键词检索专业" @removeArrItem="finalList" modelType="5"></GetMoreChoose>
						</div>
						<div class="btnGroup">
							<button class="reset" @click="reset">重置</button>
							<button class="submit" @click="submit">下一步</button>
						</div>
					</div>
					<div style="width: 7.5rem;height: 1.5rem;"></div>
				</div>
			</scroller>

		</div>
	</div>
</template>

<script>
	import {
		Checker,
		CheckerItem,
		Loading,
	} from 'vux'
	import GetMoreChoose from '~/components/GetMoreChoose1'
	import OutProviceModel from '~/components/OutProviceModel'
	import WantMajor from '~/components/WantMajor'
	import axios from '~/plugins/axios'
	import axios1 from '~/plugins/axios1'
	import goBack from '~/components/goBack'
	export default {
		components: {

			Checker,
			CheckerItem,
			GetMoreChoose,
			Loading,
			goBack,
			OutProviceModel,
			WantMajor
		},
		data() {
			return {
				choosePlaceList: [''],
				checkList: [],
				schoolTypeList: [''],
				radioList: ['公办', '民办', '中外合作', '独立院校'],
				zhuanye: [],
				daxue: [],
				outPlace: [],
				outDaxue: [],
				outZhuanye: [],
				userType: null,
			}
		},
		created() {
			this.commonJs.gologins();
		},
		mounted() {
			this.userType = this.$route.query.type;
			this.$vux.loading.show({
				text: '正在加载数据中'
			});
			this.getCascadeArea()
			if(this.commonJs.isTerminal()=='isAndroid'){
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
			destroyed: function() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		watch: {
			choosePlaceList(e) {			
				console.log('地域倾向：', e)
			},
			schoolTypeList(e) {
				console.log('院校性质：', e)
			}
		},
		methods: {
			fun() {
				this.$router.replace({
					path: '../volunteer/indexs'
			
				})
			
			},
			dianlno(type){
				if (type == 'place') {
					this.choosePlaceList=['']
				} else {
					this.schoolTypeList=['']
				}
			},
			dianlye(type){
				if (type == 'place') {
					if(this.choosePlaceList[0]===''){
						this.choosePlaceList.splice(0,1) 
					}
				} else {
					if(this.schoolTypeList[0]===''){
						this.schoolTypeList.splice(0,1) 
					}
				}
			},
			getTextByJs(arr) {
				var str = "";
				for (var i = 0; i < arr.length; i++) {
						str += arr[i]+ "+";
				}
				//去掉最后一个逗号(如果不需要去掉，就不用写)
				if (str.length > 0) {
						str = str.substr(0, str.length - 1);
				}
				return str;
			 },
			saveStudentInfo(obj) {
				axios1.post('/volunteer/savePreference',obj,true).then(res => {
					if (res.code === '0') {
						this.$vux.loading.hide();
						this.commonJs.gosto('stepThree', this.userType);
						
					}
				}).catch(() => {
					this.$vux.toast.text('数据错误1');
				})
			},
			getCascadeArea() {
				axios1.posts('/volunteer/getCascadeArea').then(res => {
					if (res.code === '0') {
						let areaData = res.data;
						let arrArea = [];
						areaData.forEach((item, index) => {
							arrArea.push(item.label)
						})
						this.checkList = arrArea
						this.$vux.loading.hide()

					}
				}).catch(() => {
					this.$vux.toast.text('数据错误2');
				})
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			reset() {
				this.choosePlaceList = [''];
				this.schoolTypeList = [''];
				this.zhuanye = [];
				this.daxue = [];
				this.outPlace = [];
				this.outDaxue = [];
				this.outZhuanye = [];
			},
			removeItem(arr, item) {
				this.zhuanye = arr.filter((x) => {
					return x !== item;
				});
			},
			submit() {
				// 需增加接口提交数据
				// this.goto('stepThree');
				
				let aryZye = [];
				let aryDx =[];
				let _aryZye = [];
				let _aryDx = [];
				this.zhuanye.forEach(item=>{	
					aryZye.push(item.major_code.substring(item.major_code.indexOf('&')+1))
				})
				this.daxue.forEach(item=>{				
					aryDx.push(item.substring(item.indexOf('&')+1))
				})
				this.outZhuanye.forEach(item=>{				
					_aryZye.push(item.substring(item.indexOf('&')+1))
				})
				this.outDaxue.forEach(item=>{				
					_aryDx.push(item.substring(item.indexOf('&')+1))
				})
				// console.log('意向专业 ', this.getTextByJs(aryZye))
				// console.log('目标大学 ', this.getTextByJs(aryDx))
				// console.log('排除地域 ', this.getTextByJs(this.outPlace))
				// console.log('排除大学 ', this.getTextByJs(_aryDx))
				// console.log('排除专业 ', this.getTextByJs(_aryZye))
				// console.log('地域倾向',this.getTextByJs(this.choosePlaceList))		
				let obj = {
						"area": this.getTextByJs(this.choosePlaceList),
						"excludeArea": this.getTextByJs(this.outPlace),
						"excludeCollege": this.getTextByJs(_aryDx),
						"excludeMajor": this.getTextByJs(_aryZye),
						"generate": 0,
						"intentionCollege": this.getTextByJs(aryDx),
						"intentionMajor":  this.getTextByJs(aryZye),
						"nature": this.getTextByJs(this.schoolTypeList),
						// "userId": 1745682,
						"userType": this.userType,
				}
				if (aryZye.length < 6) {
          this.$vux.confirm.show({
            content: '已选专业少于6个，建议选择6个以上，便于提高准确率，是否确认提交？',
            onCancel : () => {},
            onConfirm : () => {
							this.$vux.loading.show({text: '正在加载数据中'});
							this.saveStudentInfo(obj);
            }
          })
        } else {
					this.$vux.loading.show({text: '正在加载数据中'});
					this.saveStudentInfo(obj);
				}
			},
			finalList(data) {
				if (data.type == '2') {
					this.daxue = data.msgList;
				} else if (data.type == '4') {
					this.outDaxue = data.msgList;
				} else {
					this.outZhuanye = data.msgList;
				}
			},
			intentionList(data) {
				this.zhuanye = data.msgList;
			},
			// 排除省份 --- 获取数组
			finalOutProList(data) {
				this.outPlace = data.msgList;
			}

		}
	}
</script>

<style lang="less" scoped>
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

		.scrollerDiv {
			padding: 0 0.3rem;
			width: 100%;

			.chooseArea {
				margin-top: 0.41rem;
				width: 100%;
				min-height: 12rem;
				height: auto;
				box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				border-radius: 0.1rem;
				padding: 0.52rem 0.3rem 0.5rem 0.3rem;

				.placeChecker {
					.placeTitle {
						display: flex;
						justify-content: space-between;
						align-items: center;
						letter-spacing: 0.03rem;
						margin-bottom: 0.2rem;

						.title {
							color: #222;
							font-size: 0.3rem;
							font-weight: bold;
						}

						.moreTip {
							color: #BBB;
							font-size: 0.26rem;
						}
					}

					.checkerBox {
						display: flex;
						justify-content: space-around;
						flex-wrap: wrap
					}

					.defaultItem {
						width: 1.48rem;
						height: 0.7rem;
						font-size: 0.26rem;
						line-height: 0.7rem;
						border-radius: 0.1rem;
						border: 2px solid transparent;
						font-weight: 500;
						background: #FAFAFA;
						text-align: center;
						letter-spacing: 0.05rem;
						margin-bottom: 0.12rem;
						box-sizing: border-box;
					}

					.selectedItem {
						border: 2px solid #6CBF20;
						color: #6CBF20;
						background: #FFF;
					}
				}

				.schoolRadio {
					margin-top: 0.2rem;
					margin-bottom: 0.4rem;

					.schoolTitle {
						display: flex;
						justify-content: space-between;
						align-items: center;
						letter-spacing: 0.03rem;
						margin-bottom: 0.2rem;

						.title {
							color: #222;
							font-size: 0.3rem;
							font-weight: bold;
						}

						.moreTip {
							color: #BBB;
							font-size: 0.26rem;
						}
					}

					.defaultItem {
						width: 1.48rem;
						height: 0.7rem;
						line-height: 0.7rem;
						text-align: center;
						border: 2px solid transparent;
						border-radius: 0.1rem;
						background: #FAFAFA;
						color: #222;
						font-size: 0.26rem;
						font-weight: 500;
						margin-right: 0.12rem;
						margin-bottom: 0.12rem;
					}

					.selectedItem {
						border: 2px solid #6CBF20;
						color: #6CBF20;
						background: #fff;
					}
				}
			}

			.btnGroup {
				margin-top: 0.6rem;
				display: flex;
				justify-content: space-between;

				button {
					width: 3.35rem;
					height: 0.9rem;
					border-radius: 0.1rem;
					letter-spacing: 0.05rem;
					font-size: 0.36rem;
					font-weight: bold;
				}

				.reset {
					border: 1px solid #EEE;
					background: #FFF;
					color: #999;
				}

				.submit {
					border: none;
					background: #6CBF20;
					color: #FFF;
				}
			}
		}
	}

	.imgIcon {
		width: 0.4rem;
		height: 0.4rem;
	}
</style>
